<template>
  <div id="containerId">
    <slot />
  </div>
</template>
<script>
import plupload from 'plupload'
import { Upload } from '@/api/upload'
export default {
  name: 'UploadImg',
  props: {
    multiple: {
      type: Boolean,
      default: true
    }, // 打开window文件选择时窗口时是否可以多选文件
    uploadType: {
      type: Array,
      default() {
        return ['img']
      }
    }, // 上传类型  图片:img ||  Flash:flash|| 文档:txt || 视频:video || 压缩文件:zip || 音频:map3   可以选择多个
    dir: {
      type: String,
      default() {
        return 'docx'
      }
    }, // 上传的文件夹名称    images-图片，video-视频 docx-合同
    selectFileId: {
      type: String,
      default() {
        return 'selectFileId'
      }
    }, // 触发文件选择对话框的DOM元素Id
    readonly: {
      type: Boolean,
      default: false
    } // 只读模式/是否编辑
  },
  data() {
    return {
      host: '',
      new_multipart_params: {},
      fileName: ''
    }
  },
  watch: {
    readonly: {
      handler(newVal) {
        console.log(111, newVal, this.selectFileId)
        if (newVal) this.set_upload_param()
      }

    }
  },
  methods: {
    // 获取阿里云签名
    async send_request() {
      await Upload.getAliyunOssSignature({ dir: this.dir }).then((res) => {
        const data = res.data
        this.host = data.host
        this.new_multipart_params = {
          key: data.dir,
          policy: data.policy,
          OSSAccessKeyId: data.accessid,
          success_action_status: '200', // 让服务端返回200,不然，默认会返回204
          callback: data.callback,
          signature: data.signature
        }
      }).catch(() => {})
    },
    // 向阿里云上传
    async set_upload_param(up, file) {
      await this.send_request()
      this.initPlUploader()
    },
    // 获取文件后缀名
    get_suffix(filename) {
      const pos = filename.lastIndexOf('.')
      let suffix = ''
      if (pos !== -1) {
        suffix = filename.substring(pos)
      }
      return suffix
    },
    // 随机数
    random_string(len) {
      len = len || 32
      var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
      var maxPos = chars.length
      var pwd = ''
      for (var i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd
    },
    /*
     * 初始化上传插件
    */

    initPlUploader() {
      var _this = this
      var message = ''
      // 图片:img ||  Flash:flash|| 文档:txt || 视频:video || 压缩文件:zip || 音频:map3   可以选择多个
      const filter_list = [{
        title: 'flash',
        extensions: 'swf',
        mimeTypes: 'application/*'
      },
      {
        title: 'txt',
        extensions: 'txt,doc,docx,ppt,pptx,xls,xlsx,pdf',
        mimeTypes: 'text/plain,application/msword,application/powerpoint,application/excel,application/pdf'
      },
      {
        title: 'video',
        extensions: 'flv,FLV,mp4,wmv,mpeg',
        mimeTypes: 'video/mp4,video/wmv,video/mpeg,video/x-flv'
      },
      {
        title: 'img',
        extensions: 'jpg,jpeg,gif,png',
        mimeTypes: 'image/jpg,image/jpeg,image/png,image/gif'
      },
      {
        title: 'zip',
        extensions: 'zip,ZIP',
        mimeTypes: 'multipart/x-zip'
      },
      {
        title: 'map3',
        extensions: 'mp3',
        mimeTypes: 'audio/mpeg'
      }
      ]

      const last_filters = filter_list.filter(item => {
        const ext = _this.uploadType.includes(item.title)
        return ext
      })

      var uploader = new plupload.Uploader({
        runtimes: 'html5,flash,silverlight,html4', // 用来指定上传方式，指定多个上传方式请使用逗号隔开
        browse_button: _this.selectFileId, // 触发文件选择对话框的DOM元素，当点击该元素后便后弹出文件选择对话框。该值可以是DOM元素对象本身，也可以是该DOM元素的id
        multi_selection: _this.multiple, // 是否可以在文件浏览对话框中选择多个文件
        flash_swf_url: 'lib/plupload-2.1.2/js/Moxie.swf', // flash上传组件的url地址，如果是相对路径，则相对的是调用Plupload的html文档。当使用flash上传方式会用到该参数。
        silverlight_xap_url: 'lib/plupload-2.1.2/js/Moxie.xap', // silverlight上传组件的url地址，如果是相对路径，则相对的是调用Plupload的html文档。当使用silverlight上传方式会用到该参数。
        url: ' ', // 服务器端接收和处理上传文件的脚本地址，可以是相对路径(相对于当前调用Plupload的文档)，也可以是绝对路径
        // required_features: 'send_binary_string',//可以使用该参数来设置你必须需要的一些功能特征，Plupload会根据你的设置来选择合适的上传方式。因为，不同的上传方式，支持的功能是不同的，比如拖拽上传只有html5上传方式支持，图片压缩则只有html5,flash,silverlight上传方式支持。该参数的值是一个混合类型，可以是一个以逗号分隔的字符串
        filters: {
          mime_types: last_filters, // 允许上传哪些类型文件的集合
          max_file_size: '500mb', // 上传文件大小的限制
          prevent_duplicates: true // 不允许选取重复文件
        },
        init: {
          // 选择文件
          FilesAdded: function(up, files) {
            message = _this.$message({
              message: '上传中',
              duration: 0
            })
            plupload.each(files, function(file) { // 遍历文件
              const suffix = _this.get_suffix(file.name)
              _this.fileName = _this.random_string(10) + suffix
              file.target_name = _this.fileName
            })
            console.log(up, files, 'up, files', _this.new_multipart_params, _this.host)
            uploader.start()
          },
          BeforeUpload: function(up, file) {
            console.log(up, file, 'up, file')
            if (file) {
              _this.new_multipart_params.key = _this.new_multipart_params.key + file.target_name
              _this.$set(file, 'target_name', _this.new_multipart_params.key)
            }

            up.setOption({
              url: _this.host,
              multipart_params: _this.new_multipart_params
            })

            up.start()
          },

          UploadProgress: function(up, file) {},
          // 文件上传成功
          FileUploaded: function(up, file, info) {
            message.close()
            console.log(up, file, info, 'up, file, info')
            if (info.status === 200) {
              var imgurl = _this.host + file.target_name
              console.log('imgurl', imgurl)
              _this.$emit('onSuccess', imgurl)
            } else if (info.status === 203) {
              _this.$message.error(info.response)
            } else {
              _this.$message.error(info.response)
            }
          },

          Error: function(up, err) {
            message.close()
            if (err.code === -600) {
              _this.$message.error('选择的文件太大了')
            } else if (err.code === -601) {
              _this.$message.error('选择的文件后缀不对')
            } else if (err.code === -602) {
              _this.$message.error('这个文件已经上传过一遍了')
            } else {
              _this.$message.error(err.response)
            }
          }
        }
      })
      uploader.init()
    }
  }
}
</script>
